<template>
  <div class="filters">
    <el-row type="flex" class="filters-top" justify="space-between" align="middle">
      <el-col :span="8">
        单程：
        {{data.info.departCity}} - {{data.info.destCity}}
        /
        {{data.info.departDate}}
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="airport" placeholder="起飞机场" @change="handleAirport">
          <el-option v-for="(item,index) in data.options.airport" :key='index' :label="item" :value="item">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="flightTimes" placeholder="起飞时间" @change="handleFlightTimes">
          <el-option v-for="(item,index) in data.options.flightTimes" :key='index' :label="`${item.from}:00-${item.to}:00`"
            :value="`${item.from},${item.to}`">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select size="mini" v-model="company" placeholder="航空公司" @change="handleCompany" >
          <el-option v-for="(item,index) in data.options.company" :key='index' :label="item" :value="item">
          </el-option>
        </el-select>
      </el-col>

    </el-row>
    <div class="filter-cancel">
      筛选：
      <el-button type="primary" round plain size="mini" @click="handleFiltersCancel">
        撤销
      </el-button>
    </div>
      <span v-show="false">
        {{filter}}
      </span>
  </div>
</template>

<script>
  export default {
    props: ["data"],
    data(){
      return {
        flightTimes:{},
        airport:{},
        company:{}
      }
    },
    computed:{
      //监听过滤的过程
      filter(){
        console.log(123);
        return '';
      }
    },
    methods: {
      // 选择机场时候触发
      handleAirport(value) {
        const arr = this.data.flights.filter(v=>{
        return  v.org_airport_name ===value
        })
        this.$emit('setDataList',arr)
      },

      // 选择出发时间时候触发
      handleFlightTimes(value) {
        // console.log(value);
        const [from, to] =value.split(',')//[6'12]
        const arr =this.data.flights.filter(v=>{
          //出发时间
        const start = +v.dep_time.split(':')[0];
        return start >= from && start < to
        })

        this.$emit('setDataList',arr)

      },

      // 选择航空公司时候触发
      handleCompany(value) {
       const arr =  this.data.flights.filter(v => {
          return v.airline_name === value
        });
        this.$emit('setDataList', arr)
      },



      // 撤销条件时候触发
      handleFiltersCancel() {
       this.flightTimes='';
       this.airport='';
       this.company='';
       this.$emit('setDataList',this.data.flights)
      },
    }
  }
</script>

<style scoped lang="less">
  .filters {
    margin-bottom: 20px;
  }

  .filters-top {
    >div {
      /deep/ .el-select {
        margin-left: 10px;
      }
    }
  }

  .filter-cancel {
    margin-top: 10px;
    
  }
</style>
